<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
    <!-- <script type="text/javascript" src="bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap.css" /> -->

</head>

<body>
<div id="imgs"></div>
</body>
<script>
    $(function () {
        showPic()
    })

    function showPic() {
        let pics = ["https://fubangrongxing-prod.oss-cn-beijing.aliyuncs.com/image/iOS_1616582871692.jpg", "https://fubangrongxing-prod.oss-cn-beijing.aliyuncs.com/image/iOS_1616582884125.jpg", "http://fubangrongxing-prod.oss-cn-beijing.aliyuncs.com/picture/1616654104859pick.jpg", "http://fubangrongxing-prod.oss-cn-beijing.aliyuncs.com/picture/1616654117029pick.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255534939711625553484553.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255535049041625553504636734.jpeg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255537766991625553769334.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255537856101625553780642.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255542085941625554200374.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255542219051625554212679.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255542554611625554244819.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255546357831625554623516.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255546504131625554639639.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255553965501625555391587.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255554056681625555400175.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255561812821625556175938.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255561895671625556184234.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255565846311625556576915.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255565951711625556588387.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255566248031625556620039.jpg", "http://fubangrongxing-test.oss-cn-beijing.aliyuncs.com/picture/16255566327841625556628228.jpg"]
        let imgs = $('#imgs')
        pics.forEach(item => {
            let html = `<a href='${item}'>${item}</a><img src="${item}" width="20px"></img><br />`
            imgs.append(html)
        })
    }

    function test() {
        let arr = [];
        for (let i = 0; i < 10; i++) {
            arr.push({
                name: "xiaohua",
                age: i + 19,
                gender: i % 2
            })
        }
        console.log("原数组：");
        arr.forEach(item => console.log(item))

        let copy = arr;
        console.log("浅拷贝：");
        copy.forEach(item => console.log(item))

        let copy2 = [];
        for (let i = 0; i < arr.length; i++) {
            let user = {
                name: arr[i].name,
                age: arr[i].age,
                gender: arr[i].gender
            }
            copy2[i] = user;
        }
        console.log("深拷贝：")
        copy2.forEach(item => console.log(item))

        arr[2].name = "lilei"
        arr[2].nickname = "笑嘻嘻"
        console.log("原数组：");
        arr.forEach(item => console.log(item))
        console.log("修改原数组后的浅拷贝");
        copy.forEach(item => console.log(item))
        console.log("修改原数组后的深拷贝");
        copy2.forEach(item => console.log(item))

    }
</script>
</html>